<template>
	<view class="box" @click="checkbox()">
		<image class="check-img" src="../../static/check.svg"
			:style="{display: checkState === false ?'block;':'none;',width:imgW?imgW:'36rpx',height:imgH?imgH:'36rpx'}">
		</image>
		<image class="check-img" src="../../static/checked.svg"
			:style="{display: checkState === true ?'block;':'none;',width:imgW?imgW:'36rpx',height:imgH?imgH:'36rpx'}">
		</image>
		<view v-if="label" :style="{display:'inline',fontSize:fSize?fSize:'28rpx'}">{{label}}</view>
	</view>
</template>

<script>
	export default {
		name: "Custombox",
		props: ['imgW', 'imgH', 'fSize', 'value', 'label'],
		inject: ['handleParentMethod','whole'],
		data() {
			return {
				checkState: this.whole,
			};
		},
		methods: {
			checkbox() {
				this.checkState = !this.checkState;
				if (this.handleParentMethod) {
					this.handleParentMethod(this.checkState,this.value);
				}else{
					this.$emit('checkState',this.checkState)
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		display: flex;
		align-items: center;

		.check-img {
			padding-right: 10rpx;
		}
	}
</style>